<template>
  <div class="component-container">
    <view class="header">
      <span class="nav-box-name">{{ navBoxName }}</span>
    </view>
    <view class="nav-body">
      <view class="menus">
        <button
          v-for="menu in menus"
          :key="menu.name"
          @click="toPage(menu.url)"
          :open-type="compatibleOpenType(menu.openType)"
          class="menu"
        >
          <image :src="menu.image" class="image" />
          <span class="desc">{{ menu.name }}</span>
        </button>
      </view>
      <slot name="nav-items"> </slot>
    </view>
  </div>
</template>

<script setup lang="ts">
interface Menu {
  image: string
  name: string
  url?: string
  openType?: string
}
defineProps({
  navBoxName: {
    type: String,
    default: ''
  },
  menus: {
    type: Object as () => Menu[],
    default: [] as Menu[]
  }
})
// openType
function compatibleOpenType(openType: string | undefined): any {
  return openType == null ? 'navigate' : openType
}

// 去指定页面
function toPage(url?: string) {
  if (url != null) uni.navigateTo({ url })
}
</script>

<style scoped lang="scss">
.component-container {
  padding: 30rpx 35rpx;
  width: 100%;
  border-radius: 38rpx;
  background-color: #fff;
  box-sizing: border-box;

  .header {
    width: 100%;

    // $header-height: 90rpx;

    // height: $header-height;
    // line-height: $header-height;

    .nav-box-name {
      font-size: 28rpx;
      font-weight: 700;
    }
  }

  .nav-body {
    .menus {
      display: flex;
      flex-wrap: wrap;

      .menu {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        width: 25%;
        border: none !important;
        background: none !important;
        flex-direction: column;

        .image {
          width: 65rpx;
          height: 65rpx;
        }

        .desc {
          font-size: 25rpx;
          line-height: 45rpx;
        }
      }

      /** 去掉button标签的一些默认样式 */
      .menu::after {
        display: none;
      }
    }
  }
}
</style>
